<template>
  <div id="container">
    <el-container :style="{ height: screenHeight }"
      ><!--设置容器占全屏-->
      <el-header>
        <el-col :span="20"
          ><div class="grid-content bg-purple"></div>
          智慧灯杆管理系统</el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-light">
            <div class="demo-type">
              <span class="imgHead">欢迎你！{{ user.userName }}</span>

              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-avatar :src="user.userImg" :size="50"></el-avatar
                  ><i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-button type="text"  @click="dialogVisible = true">
                    <el-dropdown-item >密码修改</el-dropdown-item>
                    </el-button>
                  <el-dropdown-item>职位申请</el-dropdown-item>

                  <el-popover placement="top" width="160" v-model="visible">
                    <p>确定退出？</p>
                    <div style="text-align: right; margin: 0">
                      <el-button
                        size="mini"
                        type="text"
                        @click="visible = false"
                        >取消</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="exit"
                        >确定</el-button
                      >
                    </div>
                    <el-dropdown-item slot="reference"
                      >退出系统</el-dropdown-item
                    >
                  </el-popover>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div></el-col
        >
      </el-header>
      <el-container>
        <el-aside width="200px"
          >


          <main-menu>

            <!-- <router-link to="/User">22</router-link> -->
          </main-menu></el-aside
        >

        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>智慧灯杆！智慧的一批！</el-footer>
        </el-container>
      </el-container>
    </el-container>
    <!------------------------------------------------修改密码------------------------------------------>
    <el-dialog
  title="密码修改"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="原始密码" prop="pass1">
    <el-input type="password" v-model="ruleForm.pass1" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="新的密码" prop="pass2">
    <el-input type="password" v-model="ruleForm.pass2" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="pass3">
    <el-input type="password" v-model="ruleForm.pass3" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updatePwd">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import MainMenu from "./MainMenu.vue";
export default {
  components: { MainMenu },
  data() {
            // 验证规则
              var validatePass1 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入原始密码'));
        }else if(value != this.user.userPwd){
          callback(new Error('原始密码输入有误!'));
        } 
        else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
                    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新的密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass2) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      user: {},
      screenHeight: document.documentElement.clientHeight + "px",
      visible: false,
      // 更改密码
       dialogVisible: false,
      //  // 记录密码更改
       ruleForm: {
        },
        // 规则
        rules: {
          pass1: [
            { validator: validatePass1, trigger: 'blur' }
          ],
                    pass2: [
            { validator: validatePass2, trigger: 'blur' }
          ],
                    pass3: [
            { validator: validatePass3, trigger: 'blur' }
          ],
        },

    };
  },
  methods: {
    exit() {
      this.visible=false;
      this.$router.push("/");
    },
    updatePwd(){
      this.ruleForm.userId = this.user.userId;
      this.$axios.post("user/updatePwd",this.ruleForm).then(res=>{
        if(res.data.code == 200){
          this.$message.success("修改成功，请重新登陆！");
          this.$router.push("/");
        }
      })
    }
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem("user"));
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 20px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.imgHead {
  line-height: 100px;
  font-size: 14px;
}
</style>